<template>
    <div class="coupons-wrapper">
        <div class="top">
            <div class="portrait">
                <img :src="customer.headimgurl"/>
            </div>
            <div class="nickname">{{customer.nickname}}</div>
        </div>
        <ul class="list" v-if="coupon_list.length > 0">
            <li class="list-item" v-for="(item, index) in coupon_list">
                <div class="item-left" v-if="item.type === 100">
                    <span class="num">￥{{item.amout}}</span>
                    <span class="desc">{{item.name}}</span>
                </div>
                <div class="item-left" v-else-if="item.type === 102">
                    <span class="num">{{item.amout}}折</span>
                </div>
                <div class="item-left" v-else>
                    <span class="num">￥{{item.amout}}</span>
                </div>
                <div class="item-right">
                    <div>
                        <span class="tag">{{item.type_name}}</span>{{item.name}}
                    </div>
                    <div class="time">{{item.period_start}}-{{item.period_end}}</div>
                </div>
                <div class="new">{{item.coupon_status}}</div>
            </li>
        </ul>
        <div class="no-coupon" v-else>
            <div class="img-container">
                <img src="../components/common/img/emptyState.png"/>
                <div class="text">还没有优惠券哦</div>
            </div>
        </div>

    </div>
</template>
<script>
    import axios from '../plugins/axios';
    export default {
        async asyncData ({res, req, error}) {
            let response = {};
            let userInfo = res.locals.userInfo;
            let token = res.locals.token;
            let store_id = req.query.store;
            try {
                response = await axios.get('/api/h5/customer/coupon', {
                    params: {
                        customer_id: userInfo.id,
                        store_id: store_id,
                        token
                    }
                });
                response = response.data || {};
            }catch(e){
                error({});
            }
            return {
                coupon_list: response.data.coupon_list || [],
                customer: response.data.customer || {},
                userInfo: userInfo,
                token: token
            }
        },
        head () {
            return {
                title: '优惠券'
            }
        }
    }
</script>
<style lang="less" scoped>
    .coupons-wrapper {
        min-height: 100vh;
        background: #eee;
        display: flex;
        flex-direction: column;
        .top {
            padding: 30px 20px 20px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .portrait {
                width: 75px;
                height: 75px;
                border-radius: 50%;
                background: #000000;
                img {
                    width: 100%;
                    border-radius: 50%;
                }
            }
            .nickname {
                margin-top: 10px;
                font-size: 14px;
                color: #000000;
            }
        }
        .list {
            flex: 1;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            .list-item {
                width: 335px;
                height: 80px;
                background: #FFFFFF;
                box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
                border-radius: 8px;
                display: flex;
                position: relative;
                overflow: hidden;
                .new {
                    position: absolute;
                    background: #FF5B29;
                    font-size: 10px;
                    color: #FFFFFF;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                    right: -15px;
                    display: block;
                    width: 70px;
                    text-align: center;
                    top: 10px;
                    padding: 2px;
                }
                .item-left {
                    width: 80px;
                    font-size: 18px;
                    color: #FFFFFF;
                    text-align: center;
                    background: #000000;
                    border-radius: 8px 0 0 8px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    .desc {
                        font-size: 8px;
                        color: #FFFFFF;
                    }
                }
                .item-right {
                    flex: 1;
                    padding: 15px;
                    font-size: 14px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .tag {
                        border: 1px solid #FFD200;
                        border-radius: 1px;
                        font-size: 12px;
                        color: #FFD200;
                        display: inline-block;
                        margin-right: 10px;
                        padding: 2px 3px;
                    }
                    .time {
                        font-size: 10px;
                        color: #B3B3B3;
                    }
                }
            }
            .list-item + .list-item {
                margin-top: 10px;
            }
        }
        .no-coupon {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            .text {
                margin-top: 30px;
                font-size: 18px;
                color: #000000;
                letter-spacing: 0.22px;
            }
        }
    }
</style>